<script setup lang="ts">

import LeftMenuButton from "./LeftMenuButton.vue";
import {ref, watch} from "vue";
import TitleBarBtnGroup from "./TitleBarBtnGroup.vue";
import {platform} from "@tauri-apps/api/os";
import {useRootStore} from "../stores/root.ts";
import {listen} from "@tauri-apps/api/event";
import {storeToRefs} from "pinia";
import {appWindow, WebviewWindow} from "@tauri-apps/api/window";
import {exit} from "@tauri-apps/api/process";
import UserProfileDialog from "./UserProfileDialog.vue";

const isMacOS = ref(false)
const rootStore = useRootStore()
const {userInfo} = storeToRefs(rootStore);
import socket from "../socket/socket.ts";
const showMenu = ref(false)
const showUserProfileDialog = ref(false)

platform().then(value => {
  isMacOS.value=value==='darwin'
})

listen("LoginSuccess",()=>{

})

const index = ref(0)
const emit = defineEmits(["activeIndexChange", "showMessage"])
watch(index,()=>{
  emit("activeIndexChange",index.value)
})

const closeWindow = ()=>{
  exit(0)
}

const logout = ()=>{
  localStorage.removeItem("username")
  localStorage.removeItem("password")
  const LoginWindow = new WebviewWindow("login",{url:"/#/login",transparent:true,decorations:isMacOS.value})
  console.log(LoginWindow)
  LoginWindow?.show()
  socket.close()
  appWindow.hide()
}

const openUserProfile = () => {
  console.log('头像被点击了！')
  console.log('当前 showUserProfileDialog 值:', showUserProfileDialog.value)
  showUserProfileDialog.value = true
  console.log('设置后 showUserProfileDialog 值:', showUserProfileDialog.value)
}

const showMessage = (message: string) => {
  emit('showMessage', message)
}

</script>

<template>
<div class="main-left-panel" data-tauri-drag-region>
  <TitleBarBtnGroup v-show="isMacOS"></TitleBarBtnGroup>
  <div class="user-info">
    <div 
      @click="openUserProfile"
      style="cursor: pointer; display: inline-block;"
      class="user-avatar-container"
    >
      <v-avatar 
        :image="userInfo?.avatar" 
        class="user-avatar"
      >
      </v-avatar>
    </div>
  </div>
  <div style="text-align: center;user-select: none;flex: 1">
    <left-menu-button icon="mdi-message" :active-index="0" v-model:index="index" @click=""></left-menu-button>
    <left-menu-button icon="mdi-account-multiple" :active-index="1" v-model:index="index" @click=""></left-menu-button>
    <left-menu-button icon="mdi-home" :active-index="2" v-model:index="index" @click=""></left-menu-button>
    <left-menu-button icon="mdi-folder" :active-index="3" v-model:index="index"></left-menu-button>
  </div>
  <div class="footer">
    <v-menu v-model="showMenu" location="top">
      <template v-slot:activator="{props}">
        <v-icon icon="mdi-menu" size="30" color="#ddd" v-bind="props"></v-icon>
      </template>
      <v-list>
        <v-list-item value="1" title="切换账号" prepend-icon="mdi-logout" @click="logout"></v-list-item>
        <v-list-item  value="2" title="退出" prepend-icon="mdi-close" @click="closeWindow"></v-list-item>
      </v-list>
    </v-menu>
  </div>
  
  <!-- 用户信息编辑弹窗 -->
  <UserProfileDialog 
    v-model="showUserProfileDialog" 
    @showMessage="showMessage"
  />
</div>
</template>

<style scoped lang="scss">
.main-left-panel{
  user-select: none;
  background: rgba(22,22,22,0.7);
  width: 70px;
  height: 100%;
  padding: 10px;
  overflow: hidden;
  border-right: solid 1px #ddd;
  display: flex;
  flex-direction: column;
  height: 100%;
  .user-info{
    margin-top: 10px;
    text-align: center;
    margin-bottom: 20px;
    user-select: none;
  }

  .footer{
    text-align: center;
  }
  
  .user-avatar-container {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    z-index: 10;
    
    &:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    }
  }
  
  .user-avatar {
    pointer-events: none;
  }
}
</style>
